import React, { type FC, lazy, Suspense } from 'react';
import { createBrowserRouter, Navigate } from 'react-router-dom';

// 懒加载组件
const Login = lazy(() => import('../pages/Login'))
const Home = lazy(() => import('../view/home'))
const My = lazy(() => import('../view/my'))
const Search = lazy(() => import('../view/search'))
const Register = lazy(() => import('../pages/register'))
const SetPass = lazy(() => import('../pages/setPass'))
const Guide = lazy(() => import('../pages/Guide'))
const Conmon = lazy(() => import('../pages/know/index'))
const SymptomDetail = lazy(() => import('../pages/know/symptomDetail'))
const MedicineDetail = lazy(() => import('../pages/know/medicineDetail'))
const ConsultationDetail = lazy(() => import('../pages/consultation/consultationDetail'))
const AllScience = lazy(() => import('../pages/allScience/index'))
const Patient = lazy(() => import('../pages/Patient/index'))
const PatientDetail = lazy(() => import('../pages/Patient/patientDetail'))
const VideoPage = lazy(() => import('../pages/video/index'))
const Plan = lazy(() => import('../pages/plan/index'))
const Finance = lazy(() => import('../pages/finance/index'))
const AuthSetting = lazy(() => import('../pages/auth/index'))
const TestAPI = lazy(() => import('../pages/TestAPI'))

// 加载中组件
const LoadingSpinner = () => (
    <div style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: '100vh',
        fontSize: '16px',
        color: '#666'
    }}>
        加载中...
    </div>
)

// 高阶组件：包装懒加载组件
const withSuspense = (Component: React.ComponentType) => {
    return (props: any) => (
        <Suspense fallback={<LoadingSpinner />}>
            <Component {...props} />
        </Suspense>
    )
}
const Index: FC = ({ }) => {

    return (
        <div>

        </div>
    );
};
export const router = createBrowserRouter([
    {
        path: "/",
        element: (localStorage.getItem('guide_shown') === '1' ? <Navigate to="/home" /> : <Navigate to="/guide" />)
    },
    {
        path: "/guide",
        element: withSuspense(Guide)()
    },
    {
        path: "/login",
        element: withSuspense(Login)()
    },
    {
        path: "/home",
        element: withSuspense(Home)()
    },
    {
        path: "/my",
        element: withSuspense(My)()
    },
    {
        path: "/search",
        element: withSuspense(Search)()
    },
    {
        path: "/register",
        element: withSuspense(Register)()
    },
    {
        path: "/setpass",
        element: withSuspense(SetPass)()
    },
    {
        path: "/conmon",
        element: withSuspense(Conmon)()
    },
    {
        path: "/symptomDetail",
        element: withSuspense(SymptomDetail)()
    },
    {
        path: "/medicineDetail",
        element: withSuspense(MedicineDetail)()
    },
    {
        path: "/consultationDetail",
        element: withSuspense(ConsultationDetail)()
    },
    {
        path: "/allScience",
        element: withSuspense(AllScience)()
    },
    {
        path: "/patient",
        element: withSuspense(Patient)()
    },
    {
        path: "/patientDetail",
        element: withSuspense(PatientDetail)()
    },
    {
        path: "/video",
        element: withSuspense(VideoPage)()
    },
    {
        path: "/plan",
        element: withSuspense(Plan)()
    },
    {
        path: "/finance",
        element: withSuspense(Finance)()
    },
    {
        path: "/authSetting",
        element: withSuspense(AuthSetting)()
    },
    {
        path: "/test-api",
        element: withSuspense(TestAPI)()
    }
])

export default Index;